<template>
  <div class="tktk_container">
    <!--菜单表格-->
    <el-table v-loading="loading" :data="list" row-key="menuId">
      <el-table-column type="index" label="序号" width="80" align="center"></el-table-column>
      <el-table-column prop="name" label="菜单名称" :show-overflow-tooltip="true" align="center"></el-table-column>
      <el-table-column prop="sortNum" label="排序" align="center"></el-table-column>
      <el-table-column prop="stateFlag" label="状态" align="center">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.stateFlag == 0" type="success">正常</el-tag>
          <el-tag v-else type="danger">停用</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="创建时间" align="center" prop="createTime">
        <template slot-scope="scope">
          <span>{{ scope.row.createTime }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)">修改</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!--新增编辑表格-->
    <!-- 添加或修改菜单对话框 -->
    <el-drawer :title="title" :visible.sync="open" :direction="direction" :before-close="cancel" width="500px"
      append-to-body>
      <el-form ref="form" :model="form" :rules="rules2" label-width="100px" size="small">
        <el-form-item label="菜单名称" prop="name">
          <el-input v-model="form.name" placeholder="请输入菜单名称" maxlength="30" class="w260" />
        </el-form-item>
        <el-form-item label="显示排序" prop="sortNum">
          <el-input-number v-model="form.sortNum" :min="0" class="w260"></el-input-number>
        </el-form-item>

        <el-form-item prop="stateFlag" label="显示状态">
          <div class="radio-group">
            <label><input value="0" v-model="form.stateFlag" type="radio" name="status" />正常</label>
            <label><input value="1" v-model="form.stateFlag" type="radio" name="status" />停用</label>
          </div>
        </el-form-item>

        <!--如果是实时榜单和全部商品则不需要-->
        <el-form-item prop="textHead" label="正文标题" v-if="form.menuKey != -1 && form.menuKey != 0 && form.menuKey != 4">
          <el-input v-model="form.textHead" placeholder="请输入页面正文标题" class="w260" />
        </el-form-item>

        <el-form-item prop="textDesc" label="正文描述" v-if="form.menuKey != -1 && form.menuKey != 0 && form.menuKey != 4">
          <el-input type="textarea" maxlength="30" show-word-limit v-model="form.textDesc" placeholder="请输入页面正文描述"
            class="w260" />
        </el-form-item>

        <!--活动名称-->
        <el-form-item prop="activityName" label="活动名称" v-if="form.menuKey == 2">
          <el-input v-model="form.activityName" placeholder="请输入活动名称" class="w260" />
        </el-form-item>

        <el-form-item prop="infoList" label="所属商品" v-if="form.menuKey != -1 && form.menuKey != 0 && form.menuKey != 4">
          <div class="mb10"><el-button type="primary" icon="el-icon-check" size="mini" @click="showbox">选择商品</el-button>
          </div>
          <div class="goods-box">
            <el-tag v-for="item in form.infoList" :key="item.id" closable @close="deleteTag(item)">
              {{ item.name }}
            </el-tag>
          </div>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="submitForm('form')">确 定</el-button>
          <el-button @click="cancel">取 消</el-button>
        </el-form-item>
      </el-form>


      <el-drawer title="选择商品" :visible.sync="drawerBox" v-if="drawerBox" :wrapperClosable="false" :direction="direction"
        :append-to-body="true" :before-close="cancelBox" size="80%">
        <select-goods-multiple @transfer="transfer" :list="form.infoList"></select-goods-multiple>
      </el-drawer>
    </el-drawer>
  </div>
</template>

<script>
import { menuList, updateMenu } from '@/api/tktk/menu'
import selectGoodsMultiple from '@/components/SelectGoods/multipleList'
export default {
  name: 'menuList',
  components: { selectGoodsMultiple },
  data() {
    return {
      loading: false,
      open: false,
      drawerBox: false,
      title: '编辑菜单',
      direction: 'rtl',
      params: {
        pageNum: 1,
        pageSize: 10,
        name: ''
      },
      list: [],
      form: {
        id: '',
        menuKey: '',
        name: '',
        sortNum: 0,
        stateFlag: '1',
        textHead: '',
        textDesc: '',
        activityName: '',
        infoList: []
      },
      menuId: 3,
      rules: {
        name: [
          { required: true, message: '菜单名称不能为空', trigger: 'blur' }
        ],
        sortNum: [
          { required: true, message: '菜单顺序不能为空', trigger: 'blur' }
        ],
        status: [
          { required: true, message: '菜单状态不能为空', trigger: 'blur' }
        ]
      },
      rules2: {
        name: [
          { required: true, message: '菜单名称不能为空', trigger: 'blur' }
        ],
        sortNum: [
          { required: true, message: '菜单顺序不能为空', trigger: 'blur' }
        ],
        status: [
          { required: true, message: '菜单状态不能为空', trigger: 'blur' }
        ],
        title: [
          { required: true, message: '标题不能为空', trigger: 'blur' }
        ],
        remark: [
          { required: true, message: '描述不能为空', trigger: 'blur' }
        ],
        activityName: [
          { required: true, message: '活动名称不能为空', trigger: 'blur' }
        ],
        infoList: [
          { required: true, message: '商品不能为空', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    handleUpdate(row) {
      this.open = true
      const { id, menuKey, name, sortNum, stateFlag, textHead, textDesc, activityName, infoList } = row
      this.form = { id, menuKey, name, sortNum, stateFlag, textHead, textDesc, activityName, infoList }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    handleSizeChange(val) {
    },
    handleAdd(row) {
      this.open = true
    },
    cancelBox() {
      this.drawerBox = false
    },
    showbox() {
      this.drawerBox = true
    },
    deleteTag(row) {
      const _this = this
      this.$confirm('确定要删除吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        _this.form.infoList = _this.form.infoList.filter(item => item.id !== row.id)
      })
    },
    handleDelete(row) { },
    submitForm(ruleForm) {
      this.$refs[ruleForm].validate((valid) => {
        if (valid) {
          updateMenu(this.form).then(res => {
            if (res.code === 200) {
              this.$message.success('修改成功')
              this.open = false
              this.getMenuList()
            } else {
              this.$message.error(res.msg)
            }
          })
        }
      })
    },
    cancel() {
      this.open = false
    },
    transfer(data) {
      this.drawerBox = false
      this.form.infoList = data
    },
    getMenuList() {
      this.loading = true
      menuList(this.params).then(res => {
        this.loading = false
        this.list = res.rows || []
      }).catch(err => {
        this.loading = false
      })
    }
  },
  mounted() {
    this.getMenuList()
  }
}
</script>

<style lang="scss" scoped>
.goods-box {
  max-height: 350px;
  overflow-y: scroll;
  margin-right: 20px;

  .el-tag {
    margin-right: 5px;
    margin-bottom: 5px;
  }
}
</style>
